<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大家来找猫-demo</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/fonts/element-icons.woff" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/fonts/element-icons.ttf" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios@1.3.5/dist/axios.min.js"></script>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
    }

    body{
        width: 390px;
        height: 840px;
        margin: 0 auto;
    }

    #app{
        height: 100%;
    }

    .start{
        height: 100%;
        background: #2B2B2B;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .start .start_button{
        font-size: 32px;
        padding: 20px 40px;
        border: 1px solid grey;
    }

    .container{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div id="app">
        <div class="start" v-if="!isStart">
<!--            <div class="logo">大家来找猫</div>-->
            <div class="start_button" @click="startGame">
                开始游戏
            </div>
        </div>

        <div class="container" v-if="isStart">
            <div class="canvas">
                <img :src="currentImage.path" width="100%" @click="imgClick">
            </div>
        </div>
    </div>
</body>
</html>
<script>

    const vue = new Vue({
        el: "#app",
        data(){
          return {
              isStart: false,
              currentImage: {
                  path: '找猫1.png',
                  position: [
                      {
                          startX: 210,
                          startY: 253,
                          endX: 278,
                          endY: 342,
                      }
                  ]
              },
              errorNum: 3
          }
        },
        created() {

        },
        methods: {
            startGame: function (){
                this.isStart = true;
            },
            imgClick: function (e){
                const x = e.offsetX; // 鼠标点击事件相对于正方形左上角的 x 坐标
                const y = e.offsetY; // 鼠标点击事件相对于正方形左上角的 y 坐标

                console.log(x, y)
                let position = this.currentImage.position
                for (let i in position){
                    // 判断点击位置是否在正方形内部
                    if (x >= position[i].startX && x <= position[i].endX && y >= position[i].startY && y <= position[i].endY) {
                        alert('恭喜你找到猫咪');
                    } else {
                        alert('这里没有猫咪哦~');
                    }
                }
            }
        }
    });
</script>